<template>
  <el-dialog
    v-model="dialogFormVisible"
    :title="userForm.id ? '编辑用户':'新增用户'"
    width="800px"
    :append-to-body="true"
    :destroy-on-close="true"
    :before-close="onCancel"
  >
    <template #default>
     <div class="form-container">
       <el-form
         ref="formRef"
         :model="userForm"
         :rules="userRules"
         label-width="90px"
         class="user-editor-form"

       >
         <div class="form-row">
         <el-form-item label="用户名" prop="username" class="inline">
           <el-input v-model="userForm.username" show-word-limit placeholder="请输入用户名" />
         </el-form-item>
         <el-form-item label="密码" prop="password" class="inline" v-if="!userForm.id">
           <el-input v-model="userForm.password" show-word-limit placeholder="请输入用户密码" />
         </el-form-item>
         <el-form-item label="真实姓名" prop="realName" class="inline">
           <el-input v-model="userForm.realName" placeholder="请输入真实姓名" />
         </el-form-item>
         <el-form-item label="邮箱" prop="email" class="inline" >
           <el-input v-model="userForm.email" placeholder="请输入邮箱" />
         </el-form-item>
         <el-form-item label="性别" prop="gender" class="inline" >
           <el-select v-model="userForm.gender" placeholder="请选择性别">
             <el-option
               v-for="item in dicts.system_global_gender"
               :key="item.v"
               :label="item.k"
               :value="userForm.gender==item.v?userForm.gender:item.v "
             >
             </el-option>
           </el-select>
         </el-form-item>
         <el-form-item label="手机号码" prop="phone" class="inline">
           <el-input v-model="userForm.phone" placeholder="请输入手机号码" />
         </el-form-item>
         <el-form-item label="启用状态" prop="enabled" class="inline">
           <el-radio-group v-model="userForm.enabled">
             <el-radio
               v-for="item in dicts.system_global_status"
               :key="item.v"
               :label="userForm.enabled == item.v ? userForm.enabled : item.v "
               :value="item.v"
             >
               {{ item.k }}
             </el-radio>
           </el-radio-group>
         </el-form-item>
         <el-form-item label="所属机构" prop="unitId" class="inline" >
           <el-tree-select
             class="treeList"
             v-model="userForm.unitId"
             placeholder="请选择所属机构"
             :render-after-expand="false"
             :data="unitTree"
             :props="{ label: 'name' }"
             :check-strictly="true"
             :auto-expand-parent="true"
             :default-expand-all="true"
             node-key="id"
           />
         </el-form-item>
         <el-form-item label="所属岗位" prop="postIds" class="inline">
           <el-tree-select
             class="treeList"
             v-model="userForm.postIds"
             placeholder="请选择所属岗位"
             :render-after-expand="false"
             :data="postTree"
             :props="{ label: 'postName' }"
             :auto-expand-parent="true"
             :default-expand-all="true"
             node-key="id"
             show-checkbox
             multiple
           />
         </el-form-item>
         <el-form-item label="分配角色" prop="roleIds" class="inline">
           <el-tree-select
             class="treeList"
             v-model="userForm.roleIds"
             placeholder="请选择分配角色"
             :render-after-expand="false"
             :data="roleTree"
             :props="{ label: 'roleName' }"
             :auto-expand-parent="true"
             :default-expand-all="true"
             node-key="id"
             show-checkbox
             multiple
           />
         </el-form-item>
         <el-form-item label="备注" prop="remark" >
           <el-input
             v-model="userForm.remark"
             type="textarea"
             placeholder="请输入用户备注"
             :maxlength="200"
             show-word-limit
           />
         </el-form-item>
         </div>
       </el-form>
     </div>
    </template>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="onCancel">取消</el-button>
        <el-button type="primary" @click="onSubmit"> 确认 </el-button>
      </span>
    </template>
  </el-dialog>
</template>

<script>
export default {
  name: "user-dialog",
  dicts: ['system_global_gender','system_global_status'],
  data(){
    return{
      dialogFormVisible: false,
      roleTree:[], //角色
      postTree:[], //岗位
      unitTree:[], //机构
      userForm:{},
      userRules: {
        username: [
          { required: true, message: "用户名称为必填项", trigger: "blur" },
          {
            pattern: /^[a-zA-Z][^\u4e00-\u9fa5]*$/,
            message: "用户名不能有汉字，必须字母",
            trigger: "blur"
          }
        ],
        password: [
          { required: true, message: "用户密码为必填项", trigger: "blur" },
          {
            validator: (rule, value, callback) => {
              if (value && (value.length < 6 || value.length > 16)) {
                callback(new Error("密码长度需要大于等于6且小于等于16"));
              } else {
                callback();
              }
            },
            trigger: "blur"
          }

        ],
        realName: [
          { required: true, message: "真实姓名为必填项", trigger: "blur" },
        ],
        phone: [
          { required: true, message: "手机号为必填项", trigger: "blur" },
          {
            message: "手机号格式不正确",
            pattern: /^1[3456789]\d{9}$/,
            trigger: "blur"
          }
        ],
        roleIds: [
          { required: true, message: "请至少选择一项", trigger: "blur" },
          {
            message: "请至少选择一项",
            trigger: "change",
            validator: (value) => value.length !== 0
          }
        ],
        postIds: [
          { required: true, message: "请至少选择一项", trigger: "blur" },
          {
            message: "请至少选择一项",
            trigger: "change",
            validator: (value) => value.length !== 0
          }
        ],
        unitId: [
          { required: true, message: "请至少选择一项", trigger: "blur" }
        ],
        email: [
          {
            message: "邮箱格式不对",
            pattern: /^[a-zA-Z0-9_-]+@[a-zA-Z0-9_-]+(\.[a-zA-Z0-9_-]+)+$/,
            trigger: "blur",
          }
        ]
      },
    }
  },
  created() {
    this.getTrees()
  },
  methods:{
    getTrees(){
      Promise.all([
        this.$API.system.unit.tree.get().then(res => (this.unitTree = res.data)),
        this.$API.system.post.all.get().then(res =>(this.postTree = res.data)),
        this.$API.system.roles.all.get().then(res => (this.roleTree = res.data))
      ])
    },
    //setData
  async  setData( id ){
      if( id ){
        let { data } = await this.$API.system.userManagement.detail.get( id )
        let {user, postIds, roleIds } = data
        this.userForm = {
          id:user.id,
          username:user.username,
          password: user.password,
          phone:user.phone,
          realName:user.realName,
          gender: user.gender,
          enabled: user.enabled,
          remark: user.remark,
          email: user.email,
          unitId: user.unitId,
          roleIds,
          postIds,
        }
      }
    },
    open( mode = 'edit' ){
      this.mode = mode
      this.dialogFormVisible = true
      return this
    },
    onCancel(){
      this.userForm = {} // 清空
      this.dialogFormVisible = false
    },
    // 提交(新增/编辑)
    async onSubmit(){
      try {
        await this.$refs.formRef.validate()
        if (this.mode =='edit') {
          //编辑
          await this.$API.system.userManagement.update.post(this.userForm)
        } else {
          // 新增
          await this.$API.system.userManagement.add.post(this.userForm)
        }
        this.userForm = {} //清空
        this.$message.success('操作成功')
        this.$emit('getUserList')
        this.dialogFormVisible = false
      } catch (error) {
        console.error(error)
        this.$message.error('操作失败')
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.user-editor-form {
  :deep(.inline) {
    display: inline-flex;
    vertical-align: middle;
    width: 50%;
  }

  .treeList {
    padding: 2px;
    width: 100%;
  }
}

</style>
